<template>
  <div class="container">
      <div class="table-breadcrumb">
          <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>素材管理</el-breadcrumb-item>
              <el-breadcrumb-item>素材详情</el-breadcrumb-item>
          </el-breadcrumb>
      </div>
      <div style="margin: 20px;padding: 20px;background-color: #fff;">
          12312
          <!-- <div style="margin-top: 20px;">
              <Table :columns="listfields" :data-source="listData" :bordered="true" :pagination="false" :loading="loading">
                  <div slot="action" slot-scope="row, index">
                      <div style="display: flex;align-items: center;justify-content: space-around;margin-bottom: 6px">
                          <el-button type="primary" size="mini" @click="EditItem(index)">详情</el-button>
                      </div>
                  </div>
                  <div slot="tags" slot-scope="row, index" style="display: flex;align-items: center;flex-wrap: wrap;justify-content: space-between;">
                      <el-tag effect="plain" v-for="(item,index) in row" :key="index">{{item.tag_name}}</el-tag>
                  </div>
              </Table>
              <pagination :total="total" v-model="page" :pageSize.sync="pagesize" :showQuickJumper="true" @change="handlePageChange" @onShowSizeChange="onShowSizeChange"></pagination>
          </div> -->
      </div>
      
  </div>
</template>
<script>
  import { mapGetters, mapState, mapActions } from 'vuex';
  import pagination from '@/common/pagination.vue'
  import Table from 'ant-design-vue/lib/table';
  import modal from 'ant-design-vue/lib/modal';
  import 'ant-design-vue/lib/table/style/css'; // 或者 ant-design-vue/lib/button/style/css 加载 css 文件
  import 'ant-design-vue/lib/modal/style/css'; // 或者 ant-design-vue/lib/button/style/css 加载 css 文件
  export default {
      name: 'labelView',
      components: {
          pagination,
          Table,
          modal
      },
      data() {
          return {
              listData: [],
              total: 0, //定义初始有多少条数据
              page: 1, //默认第几页
              pagesize: 10, //一页显示多少条数据
              
          };
      },
      computed: {
          ...mapState({
              // listfields: state => state.CustomerContact.fields,
          }),
      },
      watch: {},
      created() {},
      mounted() {
          
      },
      methods: {
          ...mapActions({
              // GetFields: 'CustomerContact/GetFields',
          }),
          handlePageChange(pageno, pagesize) { //点击第几页触发的函数
              this.page = pageno;
              this.pagesize = pagesize;
              this.getList()
          },
          onShowSizeChange(current, size) { //改变每页显示条目数的函数
              //pagesize 变化的回调
              this.page = current;
              this.pagesize = size;
              this.getList()
          },
          onSelectChange(selectedRowKeys) {
              // console.log('selectedRowKeys changed: ', selectedRowKeys);
              this.selectedRowKeys = selectedRowKeys;
          },
      },
  };
</script>
<style lang="less" scoped>
  .container {
      height: 100%;
      background-color: #f5f5f5;
  }

  .table-breadcrumb {
      height: 6%;
      min-height: 40px;
      background-color: #fff;
      display: flex;
      align-items: center;
      padding: 0 10px;
  }
</style>